<template>
    <div class="register">
        <div class="text">注 册</div>
        <div class="input">
            <el-input size="large" :prefix-icon="UserFilled" v-model="username" placeholder="用户名">
            </el-input>
            <el-input size="large" :prefix-icon="Grid" v-model="password" placeholder="密码" type="password"
                show-password>
            </el-input>
            <el-input size="large" :prefix-icon="Comment" v-model="email" placeholder="QQ邮箱">

            </el-input>
            <div class="code">
                <el-input v-model="code" size="large" placeholder="验证码">
                </el-input>
                <el-button @click="getEmailcode" :disabled="time !== 120" type="success" size="large" plain>{{
                time
                    === 120 ? "获取验证码" : time
            }}</el-button>
            </div>
            <div class="btn">

                <el-button @click="Register" size="large" type="primary" plain>注册</el-button>
            </div>
        </div>

    </div>
    <el-dialog v-model="show" title="滑动验证" width="400" center>
        <div class="box" style="height: 100%; width: 100%;">
            <slide-verify ref="block" slider-text="向右滑动->" :accuracy=Number(1)   @again="onAgain" @success="onSuccess"
                @fail="onFail" @refresh="onRefresh"></slide-verify>
            <div class="text">{{ msg }}</div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { Grid, UserFilled, Comment } from '@element-plus/icons-vue'
import { getEmail } from '@/server/login';
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import { getRegister } from '@/server/login';
import { useSwitchStore } from '@/store/useswitchStore';
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
const switchStore = useSwitchStore()

const msg = ref("");
const block = ref<SlideVerifyInstance>();

const username = ref('')
const password = ref('')
const email = ref('')
const code = ref('')

const show = ref(false)

const time = ref(120)
//120秒倒计时
const countDown = () => {
    if (time.value > 0) {
        time.value--;
        setTimeout(() => {
            countDown();
        }, 1000);
    } else {
        time.value = 120;
    }
}


const validateEmail = (email: string) => {
    const emailRegex = /^[1-9][0-9]{4,10}@qq\.com$/;
    return emailRegex.test(email);
}


const getEmailcode = async () => {
    if (email.value) {
        if (validateEmail(email.value)) {
            show.value = true;
        } else {
            ElNotification({
                title: 'Error',
                message: '邮件格式错误',
                type: 'error',
            })
        }
    } else {
        ElNotification({
            title: 'Error',
            message: '请输入邮箱',
            type: 'error',
        })
    }
}

const onSuccess = async () => {
    msg.value = "验证通过";
    //延迟关闭
    setTimeout(() => {
        show.value = false;
    }, 1500);


    const res = await getEmail(email.value)
    console.log(res);
    countDown();


}

const onFail = () => {
    msg.value = "验证不通过";
}

const onRefresh = () => {
    // console.log("");
}
const onAgain = () => {
    msg.value = "请重试！";
    // 刷新
    block.value?.refresh();
};

const Register = () => {

    //不为空
    if (username.value && password.value && email.value && code.value) {
        const data = {
            username: username.value,
            password: password.value,
            email: email.value,
            code: code.value
        }
        getRegister(data).then(res => {
            ElNotification({
                title: '注册成功',
                //@ts-ignore
                message: res.msg,
                type: 'success',
            })
            //清空
            username.value = ''
            password.value = ''
            email.value = ''
            code.value = ''
            time.value = 120;
            switchStore.setSwitch(true)
        }).catch(err => {
            console.log(err);
        })
    } else {
        ElNotification({
            title: 'Error',
            message: '请填写完整',
            type: 'error',
        })
    }



}


</script>

<style scoped lang="scss">
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    flex-direction: column;

    .text {
        margin-top: 20px;
        font-weight: bold;

    }
}

.register {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;


    .text {
        font-size: 30px;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .input {
        display: flex;
        flex-direction: column;
        align-items: center;

        .el-input {
            margin: 15px 0;
            width: 300px;
        }

        .code {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 300px;

            .el-input {
                width: 60%;
            }

            .el-button {
                width: 35%;
            }
        }
    }

    .btn {
        margin: 15px;

        .el-button {
            font-weight: bold;
            width: 300px;
        }
    }
}
</style>